import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./base.css";
import appcss from "./app.module.css";

export default class App extends Component {
  // 将状态维护在App组件中，方便给下面所有的子组件传递数据
  state = {
    todos: [],
  };
  // 添加一个todo
  addTodo = (todoObj) => {
    const { todos } = this.state;
    // 接收到从子组件传递过来的数据并添加到列表的开头
    todos.unshift(todoObj);
    // 更新状态
    this.setState({
      todos: todos,
    });
  };

  // 更新todo
  updateTodo = (id, done) => {
    let { todos } = this.state;
    // 更新id相同的数据
    let newTodos = todos.map((item) => {
      if (item.id === id) {
        return { ...item, done };
      } else {
        return item;
      }
    });
    this.setState({
      todos: newTodos,
    });
  };

  // 删除一个todo
  deleteTodo = (id) => {
    let { todos } = this.state;
    // 过滤出数组内除传递过来id之外的数据
    let newTodos = todos.filter((item) => item.id !== id);
    this.setState({
      todos: newTodos,
    });
  };

  // 全选和全不选方法
  checkAllTodo = (flag) => {
    let { todos } = this.state;
    todos = todos.map((item) => {
      item.done = flag;
      return item;
    });
    this.setState({ todos: todos });
  };

  // 删除已完成
  doneAllTodo = () => {
    let { todos } = this.state;
    // 过滤出状态是false的保留下来
    todos = todos.filter((item) => !item.done);
    this.setState({ todos: todos });
  };

  render() {
    const { todos } = this.state;
    return (
      <div className={appcss.todoContent}>
        {/* 给Header组件传递一个函数，当子组件触发这个方法时会接收到子组件传递过来的数据 */}
        <Header addTodo={this.addTodo} />
        <List
          todos={todos}
          updateTodo={this.updateTodo}
          deleteTodo={this.deleteTodo}
        />
        <Footer
          todos={todos}
          checkAllTodo={this.checkAllTodo}
          doneAllTodo={this.doneAllTodo}
        />
      </div>
    );
  }

  // 组件加载完成后从缓存中获取数据
  componentDidMount() {
    let toDoList = localStorage.getItem("todoList") || [];
    this.setState({
      todos: JSON.parse(toDoList),
    });
  }

  // 组件更新完成后更新一下缓存
  componentDidUpdate() {
    const { todos } = this.state;
    localStorage.setItem("todoList", JSON.stringify(todos));
  }
}
